<template>
  <div class="main">
    <!-- 头部搜索框 -->
    <header>
      <!-- 消息图标 -->
      <img
        src="@/assets/images/首页/消息图标@2x.png"
        alt=""
        class="message-icon"
        v-if="messagedot"
        @click="information"
      />
      <img
        src="@/assets/images/樊登讲书/消息图标.png"
        alt=""
        class="message-show"
        v-else
        @click="information"
      />
      <!-- 搜索框 -->
      <van-search v-model="value" placeholder="攀登·未来书单" shape="round" />
      <!-- 金牌 -->
      <img
        src="@/assets/images/首页/组3@2x.png"
        alt=""
        class="gold-medal"
        @click="signUp"
      />
    </header>
    <!-- 滑动导航栏 -->
    <van-tabs
      v-model:active="active"
      title-active-color="#000000"
      title-inactive-color="#999999"
      line-width="21px"
      line-height="5px"
      @click="storage"
    >
      <van-tab
        v-for="value in navList"
        :key="value.msg"
        :title="value.msg"
        :to="value.path"
      >
      </van-tab>
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value = "";
    const messagedot = ref(false);
    // 导航栏列表
    const navList = reactive([
      {
        msg: "推荐",
        path: "/home/main/recommend",
      },
      {
        msg: "攀登讲书",
        path: "/home/main/tell",
      },
      {
        msg: "李蕾慢读",
        path: "/home/main/slowtell",
      },
      {
        msg: "非凡精读",
        path: "/home/main/slowtell",
      },
      {
        msg: "课程",
        path: "/home/main/slowtell",
      },
      {
        msg: "训练营",
        path: "/home/main/slowtell",
      },
      {
        msg: "新父母",
        path: "/home/main/slowtell",
      },
      {
        msg: "电子书",
        path: "/home/main/slowtell",
      },
      {
        msg: "樊登讲孟子",
        path: "/home/main/slowtell",
      },
      {
        msg: "沟通力",
        path: "/home/main/slowtell",
      },
      {
        msg: "声音剧",
        path: "/home/main/loudvoice",
      },
      {
        msg: "有声书",
        path: "/home/main/slowtell",
      },
    ]);
    const active = ref(+sessionStorage.getItem("active") || 0);
    // 存储索引
    const storage = (index) => {
      sessionStorage.setItem("active", index);
    };
    // 判断有没有消息
    const istrue = () => {
      if (localStorage.getItem("information") === "0") {
        messagedot.value = true;
      }
    };
    const router = useRouter();
    const signUp = () => {
      router.push("/sign");
    };
    const information = () => {
      router.push("/information");
    };
    onMounted(() => istrue());
    return {
      value,
      navList,
      active,
      storage,
      messagedot,
      istrue,
      information,
      signUp,
    };
  },
};
</script>

<style lang="less">
.main {
  // 头部
  background: white;
  header {
    width: 375px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 15px;
    box-sizing: border-box;
    // 消息图标
    .message-icon {
      width: 20px;
      height: 20px;
    }
    .message-show {
      width: 26px;
      height: 26px;
    }
    // 金牌
    .gold-medal {
      width: 25px;
      height: 25px;
    }
    // 搜索框
    .van-search {
      width: 287px;
    }
  }
  // 导航
  .van-tabs__wrap {
    margin-bottom: 10px;
  }
}
</style>
